<template>
  <div class="leftmenu_box">
    <ul class="list1">
      <li>
        <router-link to="/home" active-class="nav">发现音乐</router-link>
      </li>
      <li>
        <router-link to="/podcast" active-class="nav">播客</router-link>
      </li>
      <li>
        <router-link to="/video" active-class="nav">视频</router-link>
      </li>
      <li>
        <router-link to="/concern" active-class="nav">关注</router-link>
      </li>
      <li>
        <router-link to="/streams" active-class="nav">直播</router-link>
      </li>
      <li>
        <router-link to="/privatefm" active-class="nav">私人FM</router-link>
      </li>
    </ul>

    <div class="my_music">我的音乐</div>
     <ul class="list1">
      <li>
        <router-link to="/loaction" active-class="nav">本地音乐</router-link>
      </li>

    </ul>

    <div class="my_music" @click="myMusic"><a href="#">我的歌单</a></div>
    <ul class="my_music_menu clear" v-show="myMusiclist">
      <li v-for="(val, index) in playlist" :key="index" @click="iLikeMusic(val.id)">
        <i class="el-icon-star-off" v-if="index == 0 ? true : false"></i>
        <i class="el-icon-s-unfold" v-if="index != 0 ? true : false"></i>
        <router-link to="/mylikemusic" @click="iLikeMusic">{{val.name}}</router-link>
      </li>
    </ul>

    <div class="block"></div>
  </div>
</template>

<script>
import { get } from '../../assets/utils/request'
export default {
  data () {
    return {
      leftlist: ['发现音乐', '视频', '关注', '直播', '私人FM'],
      myMusiclist: false,
      playlist: []
    }
  },
  mounted () {
    try {
      const uid = this.$store.state.userinfo[0].account.id
      this.getapi.getUserMusicMenu(uid).then((res) => {
        console.log(res, 123)
        this.playlist = res.playlist
      })
    } catch (error) {
      
    }
  },
  methods: {
    iLikeMusic (e) {
      // console.log(id)
      this.$router.push({
        path: '/musicdetails',
        query: {
          id: e
        }
      })
    },
    myMusic () {
      this.myMusiclist = !this.myMusiclist
    }
  }
}
</script>

<style scoped>
.block{
    width: 100%;
    height: 150px;
}
.leftmenu_box {
  width: 15%;
  height: 100%;
  float: left;
  background-color: rgb(255, 255, 255);
  border-right: 1px solid #e1e1e1;
  box-sizing: border-box;
  overflow: hidden;
}
.leftmenu_box:hover {
   overflow: scroll;
}
.leftmenu_box::-webkit-scrollbar{
    width: 4px;
}
.leftmenu_box::-webkit-scrollbar-thumb{
    background-color: #d8d8d8;
    border-radius: 10px;
}
.leftmenu_box .list1 li {
  width: 100%;
  line-height: 40px;
  background-color: white;
  font-size: 1.2rem;
}
.list1 li a{
    width: 100%;
    height: 40px;
    display: block;
    color: #373737;
    box-sizing: border-box;
    padding-left: 10px;
    margin-left: -8px;
}
.nav{
    width: 100%;
    height: 40px;
    display: block;
    background-color: #f5f5f6;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 3px;
}
.my_music{
  width:100%;
  line-height: 30px;
}
.my_music a {
  color: #9f9f9f;

}
.like{
  width: 20px;
  line-height: 20px;
  float: left;
  margin-top: 12px;
  margin-right: 5px;
}
.my_music_menu{
  width: 100%;
  height: auto;
}
.my_music_menu li{
  width: 100%;
}

.my_music_menu i{
  width: 10%;
  line-height: 40px;
  display: block;
  float: left;
  font-size: 1.2rem;
}
.my_music_menu a{
  width: 90%;
  line-height: 40px;
  display: block;
  float: right;
  font-size: 12px;
  color: #353535;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
